<template>
  <div class="page-content">
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/profile" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">会员中心</h1>
      </div>
    </header>
    
    <main class="container mx-auto px-4 mt-4">
      <!-- 当前会员状态 -->
      <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl shadow-md p-6 mb-6 text-white">
        <div class="flex items-center justify-between mb-4">
          <div>
            <h2 class="text-xl font-bold">{{ userInfo.membershipLevel }}</h2>
            <p class="text-blue-100">{{ userInfo.membershipDesc }}</p>
          </div>
          <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
            <i class="fas fa-crown text-2xl"></i>
          </div>
        </div>
        <div class="grid grid-cols-3 gap-4 text-center">
          <div>
            <p class="text-2xl font-bold">{{ userInfo.remainingDays }}</p>
            <p class="text-sm text-blue-100">剩余天数</p>
          </div>
          <div>
            <p class="text-2xl font-bold">{{ userInfo.dailyLimit }}</p>
            <p class="text-sm text-blue-100">今日剩余</p>
          </div>
          <div>
            <p class="text-2xl font-bold">{{ userInfo.monthlyLimit }}</p>
            <p class="text-sm text-blue-100">本月使用</p>
          </div>
        </div>
      </div>
      
      <!-- 会员权益对比 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">会员权益对比</h2>
        </div>
        <div class="p-4">
          <div class="grid grid-cols-3 gap-4 text-center">
            <div class="text-center">
              <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2">
                <i class="fas fa-user text-gray-600"></i>
              </div>
              <h3 class="font-medium text-sm">普通用户</h3>
            </div>
            <div class="text-center">
              <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                <i class="fas fa-crown text-blue-600"></i>
              </div>
              <h3 class="font-medium text-sm">VIP会员</h3>
            </div>
            <div class="text-center">
              <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
                <i class="fas fa-gem text-purple-600"></i>
              </div>
              <h3 class="font-medium text-sm">钻石会员</h3>
            </div>
          </div>
          
          <div class="mt-6 space-y-3">
            <div class="flex items-center justify-between py-2 border-b border-gray-100">
              <span class="text-sm text-gray-600">每日生成次数</span>
              <div class="flex items-center space-x-4">
                <span class="text-sm">3次</span>
                <span class="text-sm text-blue-600">10次</span>
                <span class="text-sm text-purple-600">无限制</span>
              </div>
            </div>
            <div class="flex items-center justify-between py-2 border-b border-gray-100">
              <span class="text-sm text-gray-600">文件大小限制</span>
              <div class="flex items-center space-x-4">
                <span class="text-sm">5MB</span>
                <span class="text-sm text-blue-600">20MB</span>
                <span class="text-sm text-purple-600">50MB</span>
              </div>
            </div>
            <div class="flex items-center justify-between py-2 border-b border-gray-100">
              <span class="text-sm text-gray-600">高级模板</span>
              <div class="flex items-center space-x-4">
                <span class="text-sm text-gray-400"><i class="fas fa-times"></i></span>
                <span class="text-sm text-blue-600"><i class="fas fa-check"></i></span>
                <span class="text-sm text-purple-600"><i class="fas fa-check"></i></span>
              </div>
            </div>
            <div class="flex items-center justify-between py-2 border-b border-gray-100">
              <span class="text-sm text-gray-600">优先客服</span>
              <div class="flex items-center space-x-4">
                <span class="text-sm text-gray-400"><i class="fas fa-times"></i></span>
                <span class="text-sm text-blue-600"><i class="fas fa-check"></i></span>
                <span class="text-sm text-purple-600"><i class="fas fa-check"></i></span>
              </div>
            </div>
            <div class="flex items-center justify-between py-2">
              <span class="text-sm text-gray-600">批量处理</span>
              <div class="flex items-center space-x-4">
                <span class="text-sm text-gray-400"><i class="fas fa-times"></i></span>
                <span class="text-sm text-gray-400"><i class="fas fa-times"></i></span>
                <span class="text-sm text-purple-600"><i class="fas fa-check"></i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 会员套餐 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">会员套餐</h2>
        </div>
        <div class="p-4 space-y-4">
          <div 
            v-for="plan in membershipPlans" 
            :key="plan.id"
            class="border rounded-lg p-4 hover:border-blue-500 cursor-pointer"
            :class="plan.recommended ? 'border-blue-500 bg-blue-50' : 'border-gray-200'"
          >
            <div class="flex items-center justify-between mb-3">
              <div>
                <h3 class="font-semibold">{{ plan.name }}</h3>
                <p class="text-sm text-gray-500">{{ plan.description }}</p>
              </div>
              <div v-if="plan.recommended" class="bg-blue-500 text-white text-xs px-2 py-1 rounded-full">
                推荐
              </div>
            </div>
            <div class="flex items-center justify-between">
              <div>
                <span class="text-2xl font-bold text-blue-600">¥{{ plan.price }}</span>
                <span class="text-sm text-gray-500">/{{ plan.duration }}</span>
              </div>
              <button 
                @click="selectPlan(plan)"
                class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
              >
                立即开通
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 会员记录 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">会员记录</h2>
        </div>
        <div class="divide-y divide-gray-100">
          <div v-for="record in membershipRecords" :key="record.id" class="p-4">
            <div class="flex items-center justify-between">
              <div>
                <h3 class="font-medium">{{ record.title }}</h3>
                <p class="text-sm text-gray-500">{{ record.description }}</p>
                <p class="text-xs text-gray-400 mt-1">{{ formatDate(record.date) }}</p>
              </div>
              <div class="text-right">
                <p class="font-medium" :class="record.type === 'upgrade' ? 'text-green-600' : 'text-gray-600'">
                  {{ record.amount }}
                </p>
                <p class="text-xs text-gray-500">{{ record.status }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'Membership',
  data() {
    return {
      userInfo: {
        membershipLevel: 'VIP会员',
        membershipDesc: '享受更多权益和功能',
        remainingDays: 28,
        dailyLimit: 8,
        monthlyLimit: 245
      },
      membershipPlans: [
        {
          id: 1,
          name: '月度VIP',
          description: '适合短期使用',
          price: 29,
          duration: '月',
          recommended: false
        },
        {
          id: 2,
          name: '年度VIP',
          description: '性价比最高',
          price: 299,
          duration: '年',
          recommended: true
        },
        {
          id: 3,
          name: '钻石会员',
          description: '享受所有高级功能',
          price: 599,
          duration: '年',
          recommended: false
        }
      ],
      membershipRecords: [
        {
          id: 1,
          title: '升级VIP会员',
          description: '从普通用户升级为VIP会员',
          date: '2024-01-15 14:30:00',
          amount: '¥299',
          type: 'upgrade',
          status: '成功'
        },
        {
          id: 2,
          title: '月度VIP续费',
          description: 'VIP会员月度续费',
          date: '2024-01-01 10:15:00',
          amount: '¥29',
          type: 'renewal',
          status: '成功'
        },
        {
          id: 3,
          title: '首次开通VIP',
          description: '开通VIP会员服务',
          date: '2023-12-01 16:20:00',
          amount: '¥29',
          type: 'upgrade',
          status: '成功'
        }
      ]
    }
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    },
    selectPlan(plan) {
      console.log('选择套餐:', plan.name)
      // 这里可以添加支付逻辑
      alert(`您选择了${plan.name}套餐，价格：¥${plan.price}`)
    }
  }
}
</script> 